<template>
  <div class="custom-title">
    <p class="title">
      <i v-if="showIcon" class="iconfont" v-html="'&#xe8cf;'"></i>
      {{ name }}
    </p>
    <div class="right-content">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showIcon: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.custom-title {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  background: #F2F2F2;
  border-style: solid;
  border-color: #e6e6e6;
  padding: 10px 15px;
  border-width: 1px;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: #595959;
    .iconfont {
      font-size: 19px;
      font-weight: normal;
      margin-right: 5px;
    }
  }
  .right-content {
    margin-left: auto;
    margin-right: 5px;
    .el-select.tite-select {
      width: 60px;
    }
  }
}
</style>